<template>
  <div id="SelectCustom">
    <Header></Header>

    <!-- 遮罩层 111-->
    <div class="mask">
      <div class="box">
        <div class="box1">
          <div class="one">
            <div class="one-left">创建新订单</div>
            <div class="one-right">
              <img src="./img/关闭.png" alt style="width: 100%;height: 100%;" />
            </div>
          </div>

          <div class="two">
            <div class="two-left" @click="tag1()" :class="index1===0?'two-active':''">包间</div>
            <div class="two-right" @click="tag2()" :class="index1===1?'two-active':''">大厅</div>
          </div>

          <div class="three" style="display:block" ref="roomref">
            <div class="text">包间</div>
            <div class="select">
              <div class="left" >{{room}}</div>
              <div class="right" @click="change1()">></div>
            </div>
          </div>

          <!-- 弹出层 -->

          <!-- <div class="prop" :style="index2===0?'display:none':'display:block'">

            <div class="prop-1" v-for="(item,index) in list" :key="index" :class="index3===index?'prop-active':''" @click="change2(index)">{{item.name}}</div>
            
          </div> -->

          

          <div class="three-1">
            <div class="text">就餐人数</div>
            <div class="select">
              <div class="left" @click="jian()">-</div>
              <div class="median">{{count}}</div>
              <div class="right" @click="jia()">+</div>
            </div>
          </div>

          <div class="three">
            <div class="text">客户</div>
            <div class="select">
              <div class="left">{{name}}</div>
              <div class="right" @click="go1()">></div>
            </div>
          </div>

          <div class="three" style="display: none" ref="tableref">
            <div class="text">桌号</div>
            <div class="select">
              <div class="left">{{tableorder}}</div>
              <div class="right" @click="router.push('/seat/content1')">></div>
            </div>
          </div>

          <div class="four" :class="name==='请选择客户'?'':'four-1'" @click="diancai()">点菜</div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang='ts'>
import Header from "../../views/pages/Homeheader.vue";

import { ref, reactive,onMounted} from "vue";
import {useRouter} from 'vue-router'
const route=useRouter()

// 包间大厅选择样式
const index1 = ref(0);
const tableref = ref(false);
const roomref = ref(false);
const name=ref('')
const room=ref('')
const tableorder=ref('')


const tag1 = () => {
  index1.value = 0;
  console.log(index1.value);
  tableref.value.style.display = "none";
  roomref.value.style.display = "block";
};
const tag2 = () => {
  index1.value = 1;
  console.log(index1.value);
  tableref.value.style.display = "block";
  roomref.value.style.display = "none";
};

// 计数
const count = ref(0);
const jia = () => {
  count.value++;
  localStorage.setItem('personNum',count.value)
};
const jian = () => {
  if (count.value > 0) {
    count.value--;
  } else {
    count.value = 0;
  }
  localStorage.setItem('personNum',count.value)
};

// 箭头逆转
const index2 = ref(0);
const change1 = () => {
  router.push({
    path:"/seat/content2"
  })

};

// 弹出层包间
const list=reactive([
  {'name':"包间1"},
  {'name':"包间2"},
  {'name':"包间3"},
  {'name':"包间4"},
  {'name':"包间5"},

])

// 选择不同的包间

const index3=ref('')
// const change2=(index)=>{
//   index3.value=index
//   room.value=list[index].name

// }

// 跳转路由
const router=useRouter()
const go1=()=>{
  router.push('/SelectCustom')
}

// 接收路由传递过来的参数
let obj=route.currentRoute.value.query
let obj1=route.currentRoute.value.query
let obj2=route.currentRoute.value.query

onMounted(()=>{

  if(localStorage.getItem('name')){
    name.value=JSON.parse(localStorage.getItem('name'))
  }else{
    name.value='请选择客户'
  }

  if(localStorage.getItem('tableorder')){
    tableorder.value=JSON.parse(localStorage.getItem('tableorder'))

  }else{
    tableorder.value='请选择桌号'
    // tableorder.value="A3"
  }
  if(localStorage.getItem('baoname')){
    room.value=JSON.parse(localStorage.getItem('baoname'))

  }else{
    // room.value='人和'
    room.value="请选择包间"
  }
  if(localStorage.getItem('index')=='0'){
    tag1()
  }else{
    tag2()
  }

  if(localStorage.getItem('index')=='0'){
    tag1()
    

  }else{
    tag2()
   
  }

})
// 跳转点菜传递名字
const diancai=()=>{
  router.push({
    path:'/SelectVegetable',
   
  })
  localStorage.setItem('personNum',JSON.stringify(count.value))
}







</script>

<style lang="scss" scoped>
#SelectCustom {
  width: 100%;
  height: 100vh;
  background-color: #e5e5e5;
  position: relative;
  //   遮罩层
  .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    .box {
      width: 35%;
      height: 74vh;
      background-color: #fff;
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 12px;
      .box1 {
        width: 90%;
        height: 90%;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .one {
          width: 100%;
          height: 5vh;

          display: flex;
          justify-content: space-between;
          align-items: center;
          .one-left {
            width: 38%;
            height: 100%;

            font-size: 28px;
            color: black;
            line-height: 5vh;
            font-weight: 800;
          }

          .one-right {
            width: 7%;
            height: 56%;
          }
        }

        .two {
          width: 100%;
          height: 6vh;

          margin-top: 3vh;
          border-radius: 12px;
          display: flex;
          justify-content: space-between;
          .two-left {
            width: 50%;
            height: 100%;

            border-radius: 12px;
            text-align: center;
            line-height: 6vh;
            font-size: 17px;
            font-weight: 600;
            background-color: #f5f5f5;
            color: black;
          }

          .two-right {
            width: 50%;
            height: 100%;

            border-radius: 12px;
            text-align: center;
            line-height: 6vh;
            font-size: 17px;
            font-weight: 600;
            background-color: #f5f5f5;
            color: black;
          }

          .two-active {
            background: #dceefe;
            color: #025cca;
          }
        }

        .three {
          width: 100%;
          height: 9vh;
          margin-top: 2vh;

          .text {
            width: 100%;
            height: 3vh;

            font-size: 17px;
            color: black;
            font-weight: 600;
            line-height: 3vh;
          }
          .select {
            width: 100%;
            height: 5vh;
            margin-top: 1vh;

            border-radius: 10px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .left {
              width: 30%;
              height: 100%;

              font-size: 17px;
              color: #979a9c;
              font-weight: 600;
              line-height: 5vh;
              margin-left: 5%;
            }

            .right {
              width: 10%;
              height: 100%;

              font-size: 28px;
              color: black;
              font-weight: 600;
              line-height: 41px;
              margin-left: 54%;
            }
            .right-deg {
              width: 10%;
              height: 100%;

              font-size: 28px;
              color: black;
              font-weight: 600;
              line-height: 5vh;
              margin-left: 54%;
              transform: rotate(90deg);
              padding-left: 10px;

            }
          }
        }

        .three-1 {
          width: 100%;
          height: 9vh;
          margin-top: 2vh;

          .text {
            width: 100%;
            height: 3vh;

            font-size: 17px;
            color: black;
            font-weight: 600;
            line-height: 3vh;
          }
          .select {
            width: 100%;
            height: 5vh;
            margin-top: 1vh;

            border-radius: 10px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .left {
              width: 6%;
              height: 25px;
              background: #025cca;
              border-radius: 50%;
              margin-left: 6%;
              text-align: center;
              line-height: 17px;
              font-size: 30px;
              color: white;
            }

            .median {
              width: 10%;
              height: 5vh;

              margin-left: 34%;
              text-align: center;
              line-height: 5vh;
              font-size: 20px;
            }

            .right {
              width: 6%;
              height: 26px;
              background: #025cca;
              margin-left: 32%;
              border-radius: 50%;
              text-align: center;
              line-height: 22px;
              color: white;
              font-size: 23px;
            }
          }
        }

        .four {
          width: 100%;
          height: 6vh;

          margin-top: 2vh;
          border-radius: 12px;
          text-align: center;
          line-height: 6vh;
          font-size: 19px;
          background: #b4dbfd;
          color: white;
        }

        .four-1{
          background: #2065a1;

        }

        .prop{
      
          height: 13vh;
         
          position: absolute;
          z-index: inherit;
       
          top:26vh;
          width: 50%;
          left:44%;
          border-radius: 12px ;
          overflow: auto;
          .prop-1{
            width: 100%;
            height: 5vh;
            background: #f5f5f5;
            border-radius: 12px;
            text-align: center;
            line-height: 5vh;
            color: rgb(176, 169, 169);
            font-size: 19px;
            font-weight: 600;
          
            
          }
          .prop-active{
            background: #DCEEFE;
            color: #025cca;
          }
        
        }


      }
    }
  }
}
</style>